<template>
	<view class="one ">
		<view class="">
			<view class="u-p-20">
				<view class="u-p-20 u-b-r-20" style="background-color: #EBF2FF;">
					<view class="u-flex" style="padding-bottom: 20rpx;border-bottom: 1rpx solid #CCD5E7;">
						<u-image src='https://www.sqkjkj.vip/wxImg/join/img1.png' width='97rpx' height='97rpx'></u-image>
						<view class="u-m-l-20">区域代理</view>
					</view>

					<view v-for="(item,index) in agentList" :key="index" class="u-p-20 u-m-t-20 u-b-r-16"
						style="background-color: #D7E3FB;">
						<view class="u-flex u-row-between">
							<view class="u-flex">
								<u-image src='https://www.sqkjkj.vip/wxImg/join/img2.png' width='31rpx' height='31rpx'></u-image>
								<view class="u-weight u-font-20 u-m-l-20">{{item.title}}</view>
							</view>
							<view
								@click="$u.route(`${item.is_apply==0?`/subcontract/join/truejoin/truejoin?num=${item.agent_level}`:''}`)"
								class="u-flex">
								<view class="u-weight u-font-20 " style="color: #3B87F0;">{{item.is_apply==0?'去申请':'已申请'}}</view>
								<u-image class="u-m-l-20" v-if="item.is_apply==0" src='https://www.sqkjkj.vip/wxImg/join/img3.png'
									width='31rpx' height='31rpx'></u-image>
							</view>
						</view>
						<view class="u-m-t-20 u-font-20" style="color: #454545;">
							<u-parse :html="item.des"></u-parse>
						</view>
					</view>
				</view>


			</view>
			<view class="u-p-20">
				<view class="u-p-20 u-b-r-20" style="background-color: #FDF4F4;">
					<view class="u-flex" style="padding-bottom: 20rpx;border-bottom: 1rpx solid #E7CFCC;">
						<u-image src='https://www.sqkjkj.vip/wxImg/join/img4.png' width='97rpx' height='97rpx'></u-image>
						<view class="u-m-l-20">合伙人</view>
					</view>

					<view class="u-p-20 u-m-t-20 u-b-r-16" style="background-color:#FDF4F4;">
						<view class="u-flex u-row-between">
							<view class="u-flex">
								<u-image src='https://www.sqkjkj.vip/wxImg/join/img2.png' width='31rpx' height='31rpx'></u-image>
								<view class="u-weight u-font-20 u-m-l-20">合伙人</view>
							</view>
							<view class="u-flex" @click="apply" v-if="partner_list.is_apply==0">
								<view class="u-weight u-font-20 u-m-r-20" style="color: #FF5551;">申请</view>
								<u-image src='https://www.sqkjkj.vip/wxImg/join/img5.png' width='31rpx' height='31rpx'></u-image>
							</view>
							<view class="" v-else>
								<view class="u-weight u-font-20 " style="color: #FF5551;">已成为合伙人</view>
							</view>
						</view>
						<view class="u-m-t-20 u-font-20" style="color: #454545;">
							<u-parse :html="partner_list.des"></u-parse>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 支付弹窗 -->
		<u-popup v-model="show7" mode="bottom" @close="close7">
			<view class="bg_FFFFFF u-b-r-12">
				<view @click="pays='deposit'" class="u-flex u-row-between u-p-30" style="border-bottom: 1rpx solid #F6F6F6FF;">
					<view class="u-flex">
						<view class=" u-flex">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/card.png" mode="aspectFill" width="50rpx"
								height='50rpx'>
							</u-image>
							<view class="u-m-l-30 u-font-28 ">钱包支付</view>
						</view>
						<view class="u-m-l-30 cl_898989FF u-font-24">可用<text class="cl_FB473CFF">￥{{yu.user_wallet || 0}}</text>
						</view>
					</view>
					<view class="u-flex">
						<view class="">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c1.png" mode="aspectFill" width="30rpx"
								height='30rpx' v-if="pays=='deposit'"></u-image>
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c.png" mode="aspectFill" width="30rpx"
								height='30rpx' v-else>
							</u-image>
						</view>
					</view>

				</view>

				<view @click="openEpayDialog" class="u-flex u-row-between u-p-30" style="border-bottom: 1rpx solid #F6F6F6FF;">
					<view class="">
						<view class=" u-flex">
							<u-image src="http://xcx.itcwc.com/wxImg/5dcf4786109a5.png" mode="aspectFill" width="50rpx" height='50rpx'>
							</u-image>
							<view class="u-m-l-30 u-font-28 ">易支付</view>
						</view>

					</view>
					<view class="u-flex">
						<!-- <view class="u-m-r-20 cl_FB473CFF">-￥{{userinfo.goods_amount}}</view> -->
						<view class="">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c1.png" mode="aspectFill" width="30rpx"
								height='30rpx' v-if="pays == 'epay'"></u-image>
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c.png" mode="aspectFill" width="30rpx"
								height='30rpx' v-else>
							</u-image>
						</view>
					</view>
				</view>

				<view @click="pays='wechat'" class="u-flex u-row-between u-p-30" style="border-bottom: 1rpx solid #F6F6F6FF;">
					<view class="">
						<view class=" u-flex">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/wx.png" mode="aspectFill" width="50rpx"
								height='50rpx'>
							</u-image>
							<view class="u-m-l-30 u-font-28 ">微信支付 </view>
						</view>

					</view>
					<view class="u-flex">
						<view class="">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c1.png" mode="aspectFill" width="30rpx"
								height='30rpx' v-if="pays=='wechat'"></u-image>
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c.png" mode="aspectFill" width="30rpx"
								height='30rpx' v-else>
							</u-image>
						</view>
					</view>
				</view>
				<!-- #ifdef APP-PLUS -->
				<view v-if="!isWechatMP" @click="pays='alipay'" class="u-flex u-row-between u-p-30"
					style="border-bottom: 1rpx solid #F6F6F6FF;">
					<view class="">
						<view class=" u-flex">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/zf.png" mode="aspectFill" width="50rpx"
								height='50rpx'>
							</u-image>
							<view class="u-m-l-30 u-font-28 ">支付宝支付</view>
						</view>
					</view>
					<view class="u-flex">
						<view class="">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c1.png" mode="aspectFill" width="30rpx"
								height='30rpx' v-if="pays=='alipay'"></u-image>
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c.png" mode="aspectFill" width="30rpx"
								height='30rpx' v-else>
							</u-image>
						</view>
					</view>
				</view>
				<!-- #endif -->
			</view>
			<!-- 立即支付 -->
			<view class=" u-h-120 u-w-750 bg_FFFFFF">
				<view @click="true_pays" class="u-w-640 u-auto u-h-98 bl2C_3F u-l-h-98 u-text-center u-b-r-20 u-auto"
					style="letter-spacing: 4rpx;color: #ffffff;">立即支付 ￥{{payParams.price}}</view>
			</view>
		</u-popup>
		<u-popup v-model="show8" mode='center'>
			<view class="u-p-30 u-h-200">
				<u-message-input v-if="show8" :focus="true" :maxlength='6' @change="change" @finish="finish"></u-message-input>
			</view>
		</u-popup>

		<!-- 易支付选择弹窗 -->
		<u-popup v-model="showEpayDialog" mode="center" width="80%" border-radius="10">
			<view class="epay-dialog">
				<view class="epay-dialog-title">请选择支付方式</view>
				<view class="epay-dialog-content">
					<view class="epay-payment-option" @click="selectEpayMethod('wxpay')">
						<view class="radio-button">
							<view class="radio-inner" :class="{ 'radio-selected': epayMethod === 'wxpay' }"></view>
						</view>
						<view class="payment-icon">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/wx.png" mode="aspectFill" width="40rpx"
								height='40rpx'></u-image>
						</view>
						<view class="payment-name">微信支付</view>
					</view>
					<view v-if="!isWechatMP" class="epay-payment-option" @click="selectEpayMethod('alipay')">
						<view class="radio-button">
							<view class="radio-inner" :class="{ 'radio-selected': epayMethod === 'alipay' }"></view>
						</view>
						<view class="payment-icon">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/zf.png" mode="aspectFill" width="40rpx"
								height='40rpx'></u-image>
						</view>
						<view class="payment-name">支付宝支付</view>
					</view>
				</view>
				<view class="epay-dialog-footer">
					<view class="epay-dialog-btn cancel-btn" @click="showEpayDialog = false">取消</view>
					<view class="epay-dialog-btn confirm-btn" @click="confirmEpayMethod">确定</view>
				</view>
			</view>
		</u-popup>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			identity: '',
			pays: '',
			show7: false,
			show8: false,
			payParams: '',
			agentList: [],
			yu: '',
			partner_list: '',
			isWechatMP: false,
			deviceType: 'web', // 默认为web
			showEpayDialog: false,
			epayMethod: '',
		}
	},
	onShow() {
		this.identity = uni.getStorageSync('userinfo').identity
		this.yu = uni.getStorageSync("userinfo")
		this.agent_level_list()
		this.detectDeviceType()
	},
	// onHide() {
	// 	this.cancel_apply()
	// },
	// onUnload() {
	// 	this.cancel_apply()
	// },
	methods: {
		// 检测设备类型并设置相应的参数
		detectDeviceType() {
			// #ifdef H5
			this.deviceType = 'web' // H5环境使用web
			this.isWechatMP = false
			// #endif

			// #ifdef MP-WEIXIN
			this.deviceType = 'jsapi' // 微信小程序环境使用jsapi
			this.isWechatMP = true
			// #endif

			// #ifdef MP-ALIPAY
			this.deviceType = 'jsapi' // 支付宝小程序环境使用jsapi
			this.isWechatMP = false
			// #endif

			// #ifdef APP-PLUS
			this.deviceType = 'web' // APP环境使用app
			this.isWechatMP = false
			// #endif

			console.log('当前设备类型:', this.deviceType)
		},
		cancel_apply() {
			if (this.payParams.target_id) {
				this.$api.cancel_apply({
					agent_id: this.payParams.target_id
				}, res => {
					this.list = res.data.data
				})
			}
		},
		agent_level_list() {
			this.$api.agent_level_list({}, res => {
				if (res.data.code == 1) {
					this.agentList = res.data.data.agent_list
					this.partner_list = res.data.data.partner_list[0]
				}
			})
		},
		backs() {
			uni.navigateBack()
		},
		// 点击立即支付
		true_pays() {
			if (this.pays == 'deposit') {
				this.pay()
				// if (uni.getStorageSync('userinfo').have_trade_pwd == 0) {
				// 	uni.showModal({
				// 		title: '提示',
				// 		content: '请先设置余额支付密码',
				// 		success: (res)=> {
				// 			if (res.confirm) {
				// 				this.$u.route('/pages/changePayPassword/changePayPassword')
				// 			} else {

				// 			}
				// 		}
				// 	})
				// 	return
				// }
				// this.show8 = true

			} else if (this.pays == 'epay') {
				// 易支付
				let params = {
					target_id: this.payParams.target_id,
					target_type: this.payParams.target_type,
					pay_type: this.pays,
					type: this.epayMethod, // 使用选择的支付方式
					method: this.deviceType, // 使用检测到的设备类型
				}
				this.$com.easyPay(params, this.pays);
			} else {
				// #ifdef APP-PLUS
				this.$com.wxPay({
					target_id: this.payParams.target_id,
					target_type: this.payParams.target_type,
					pay_type: this.pays,
					client: "APP",
					trade_pwd: ''
				}, this.pays).then(ok => {
					this.$refs.uToast.show({
						title: ok.data.msg,
						type: 'success',
						callback: cal => {
							this.$u.route({
								type: 'reLaunch',
								url: '/pages/my/my'
							})
						}
					})
				})
				// #endif
				// #ifdef MP-WEIXIN
				this.$com.weChatPay({
					target_id: this.payParams.target_id,
					target_type: this.payParams.target_type,
					pay_type: this.pays,
					client: "JSAPI",
					trade_pwd: ''
				}, this.pays).then(ok => {
					this.$refs.uToast.show({
						title: ok.msg,
						type: 'success',
						callback: cal => {
							this.$u.route({
								type: 'reLaunch',
								url: '/pages/my/my'
							})
						}
					})
				})
				// #endif
			}
		},
		change(e) {
		},
		finish(e) {
			this.pay(e)
			this.shows = false
		},
		apply() {
			this.$api.apply({
				agent_level: this.partner_list.agent_level
			}, res => {
				if (res.data.code == 1) {
					this.show7 = true
					this.payParams = res.data.data
				}
			})
		},
		close7() {
			// this.cancel_apply()
		},
		pay(obj = '') {
			uni.showLoading({
				title: '支付中',
				mask: true
			});
			this.$api.go_pay({
				target_id: this.payParams.target_id,
				target_type: this.payParams.target_type,
				pay_type: this.pays,
				client: "APP",
				trade_pwd: obj
			}, res => {
				uni.hideLoading()
				if (res.data.code == 1) {
					uni.showToast({
						icon: 'none',
						title: '申请成功'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 500)
				} else {
					uni.showToast({
						icon: 'none',
						title: res.data.msg
					})
				}
			})
		},
		selectEpayMethod(method) {
			// 如果是微信小程序环境且尝试选择支付宝支付，则不允许
			if (this.isWechatMP && method === 'alipay') {
				return
			}
			this.epayMethod = method
		},
		confirmEpayMethod() {
			if (this.epayMethod === 'wxpay') {
				this.pays = 'wechat'
			} else if (this.epayMethod === 'alipay') {
				this.pays = 'alipay'
			}
			this.showEpayDialog = false
		},
		openEpayDialog() {
			// 在微信小程序环境中，默认选择微信支付
			if (this.isWechatMP) {
				this.epayMethod = 'wxpay'
			} else {
				// 默认选择微信支付，但允许切换
				this.epayMethod = 'wxpay'
			}
			this.showEpayDialog = true
		},
	}
}
</script>

<style scoped lang="scss">
page {
	// width: 750rpx;
	// height: 1632rpx;
	// // background: url('https://www.sqkjkj.vip/wxImg/join/img.png') no-repeat;
	// background-size: 100% 100%;
}

/* 易支付选择弹窗样式 */
.epay-dialog {
	background-color: #fff;
	padding: 30rpx;
}

.epay-dialog-title {
	font-size: 32rpx;
	font-weight: bold;
	text-align: center;
	margin-bottom: 30rpx;
}

.epay-dialog-content {
	padding: 20rpx 0;
}

.epay-payment-option {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.radio-button {
	width: 36rpx;
	height: 36rpx;
	border-radius: 50%;
	border: 2rpx solid #ddd;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
}

.radio-inner {
	width: 20rpx;
	height: 20rpx;
	border-radius: 50%;
	background-color: transparent;
}

.radio-selected {
	background-color: #3298FD;
}

.payment-icon {
	margin-right: 20rpx;
}

.payment-name {
	font-size: 28rpx;
}

.epay-dialog-footer {
	display: flex;
	justify-content: space-between;
	margin-top: 40rpx;
}

.epay-dialog-btn {
	width: 45%;
	height: 80rpx;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
}

.cancel-btn {
	background-color: #f5f5f5;
	color: #666;
}

.confirm-btn {
	background-color: #3298FD;
	color: #fff;
}
</style>
